
<template>
    <page-header-wrapper :title="false">
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="16">
              <!-- <a-col :span="8">
                <a-form-item label="分类名称">
                  <a-input v-model="queryParam.name" placeholder="请输入" />
                </a-form-item>
              </a-col> -->
              <a-col :span="8" :offset="16" style="text-align: right;">
                <span class="table-page-search-submitButtons">
                  <!-- <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button> -->
                  <!-- <a-button type="primary" style="margin-left: 8px" @click="handleSearch">查询</a-button>
                  <a-button style="margin-left: 8px" @click="handleReset">重置</a-button> -->
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <s-table
          ref="table"
          size="default"
          :columns="columns"
          :data="loadData"
          :pageNum="pageNum"
          :pageSize="pageSize"
          rowKey="id">
          <div slot="action" slot-scope="text, record">
            <a type="primary"  @click="handleAdd(record)">新增</a>
          </div>
          <template slot="expandedRowRender" slot-scope="record">
            <a-table
              :columns="innerColumns"
              :data-source="record.detailList"
              :pagination="false"
            >
            <div slot="action" slot-scope="index, record">
              <a type="primary"  @click="handleEdit(record)">编辑</a>
              <a type="primary"  style="margin-left: 10px" @click="handleDelete(record)">删除</a>
            </div>
            </a-table>
          </template>
        </s-table>
      </a-card>
      <create-form
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk" />
    </page-header-wrapper>
  </template>
  
  <script>
  import { STable } from '@/components'
  import { dicList as list, dicAdd as add,  dicUpdate as update, dicDelete} from '@/api/base'
  import CreateForm from './modules/label-form'
  export default {
    name: 'TableList',
    components: {
      STable,
      CreateForm
    },
    // status 1-激活 2-冻结 3-删除
    data () {
      return {
        queryParam: {},
        pageNum: 1,
        pageSize: 15,
        visible: false,
        mdl: null,
        confirmLoading: false,
        columns: [
          {
            title: '字典名称',
            dataIndex: 'name'
          },
          {
            title: '备注',
            dataIndex: 'remark'
          },
          {
            title: '操作',
            width: 80,
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        innerColumns: [
          {
            title: '标签',
            dataIndex: 'label'
          },
          {
            title: '操作',
            width: 140,
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    created () {
    },
    methods: {
      handleSearch (e) {
        this.$refs.table.refresh()
      },
      handleEdit (record) {
        this.visible = true
        this.$refs.createModal.title = '编辑'
        this.mdl = { ...record, name: record.dictName }
      },
      handleAdd (record) {
        this.visible = true
        this.$refs.createModal.title = '新增'
        this.mdl = { dictId: record.id, name: record.name }
      },
      handleCancel () {
        this.visible = false
        this.$refs.createModal.fileList = []
        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
      handleReset () {
        this.queryParam = {}
        this.$refs.table.refresh()
      },
      loadData (params) {
        return list(Object.assign(params, this.queryParam)).then(res => {
          return res.data
        })
      },
      handleDelete(row) {
        this.$confirm({
          title: '您确定要删除它',
          onOk: () => {
            dicDelete([row.id]).then(() => {
              this.$refs.table.refresh()
            })
          }
        })
      },
      handleOk () {
        const form = this.$refs.createModal.form
        this.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            if (values.id) {
              // 修改 e.g.
              update(values).then(res => {
                this.visible = false
                this.confirmLoading = false
                // 重置表单数据
                form.resetFields()
                // 刷新表格
                this.$refs.table.refresh()
                this.$message.info('修改成功')
              })
            } else {
              // 新增
              add(values).then(res => {
                this.visible = false
                this.confirmLoading = false
                // 重置表单数据
                form.resetFields()
                // 刷新表格
                this.$refs.table.refresh()
  
                this.$message.info('新增成功')
              })
            }
          } else {
            this.confirmLoading = false
          }
        })
      }
    }
  }
  </script>
  